<template>
  <div>
    <div>数据的响应式</div>
    <!-- <div>{{msg}}</div> -->
    <!-- <div>{{obj.msg}}</div> -->
    <!-- <div>{{obj.info}}</div> -->
    <div>{{msg}}</div>
    <div>{{info}}</div>
    <button @click='handleClick'>点击</button>
  </div>
</template>
<script>
// 响应式：A的变化会引起B的变化
// 数据的响应式：数据的变化会引起视图（模板）的变化
// toRef和toRefs方法的作用就是为了去掉模板中对象的前缀
// toRef和toRefs方法的返回值中的变量是对象（其中的value属性表示具体数据）
// 在js中访问该数据需要value属性，但是模板中访问不需要value属性
import { reactive, toRefs } from 'vue'

export default {
  name: 'App',
  setup () {
    // 这里默认定义的数据不是响应式的
    // let msg = 'hello'
    // 需要使用reactive方法包裹对象数据，从而保证数据响应式
    const obj = reactive({
      msg: 'hello',
      info: 'nihao'
    })

    // 通过toRef和toRefs处理过的数据依然是响应式的
    // 可以去掉模板中对象名前缀
    // const msg = toRef(obj, 'msg')
    // const info = toRef(obj, 'info')
    const { msg, info } = toRefs(obj)

    // 响应式数据一旦被解构，就会失去响应式能力
    // const { msg, info } = obj

    const handleClick = () => {
      // msg = 'nihao'
      // console.log(msg)
      // obj.msg = 'nihao'
      // obj.msg = 'abc'
      msg.value = 'hi'
      console.log(msg.value)
    }

    return { msg, info, handleClick }
  }
}
</script>
